<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基础01</title>
</head>
<body>
<div id="box" data-id="this" onclick="dbClick(event)">
    <p> 哈哈哈</p>
    <h2>美滋滋的</h2>
    <h1>youhouhou</h1>
</div>
<script defer>
    // 页面全部渲染完成后
    // defer属性， 外部js文件
    // setTimeout js变为宏文件
    window.onload = () => {
        const OBox = document.querySelector('#box')
        console.dir(OBox)
        // 页面中非异步的都加载完， 什么图片啥的没有加载完
        console.log(document.nodeType)
    }
    dbClick = (event) => {
        const OBox = document.querySelector('#box')
        // 可以给原来的属性上添加其他的属性
        Object.assign(OBox.style, {
            color: 'white',
            backgroundColor:'red'
        })
        console.log(OBox.nodeName);
        console.log(OBox.tagName);
        console.log(OBox.nodeType);
        console.log(OBox.nodeValue);
        // console.log中的事件是可以执行的
        // 其实其中完成了很多事情
        console.log(OBox.style.color = 'cyan');
        console.log(OBox.style.color = 'white');
        console.log(OBox.style.background = 'cyan');

        console.log(event)
        console.log(event.target.dataset.id)


        // 返回的是， OBox的第一个孩子的数据
        console.log(OBox.childNodes[0].data)
        // 这玩意不是数组， 只是个类数组
        console.log(OBox.childNodes)
        console.log( Array.isArray(OBox.childNodes))
        // 这样这玩意也是数组了， Es6的拓展符方法
        console.log( Array.isArray([...OBox.childNodes]))
        // 这样这玩意儿就是数组了
        console.log(Array.prototype.slice.call(OBox.childNodes))
        console.log(Array.isArray(Array.prototype.slice.call(OBox.childNodes)))
        console.log(document.body)
    }
    const OBox = document.body.childNodes
    const res = Array.from(OBox).filter(item => item.nodeType === 1)
    console.log(res)
    console.log(OBox)
</script>
<!--<div id="box"></div>-->
</body>
</html>
